<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div style="overflow: hidden;">
        <input type="text" name="" id="text1">
        <button id="b1">点击</button>
    </div>

    <div id="d1"></div>
    <script>

        $("#b1").click(function () {
            var text = $("#text1").val()
            var d1 = document.querySelector("#d1")
            $.ajax({
                //请求方式
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                url: "http://api.tianapi.com/txapi/cangtoushi/index?key=b4be8a46c442384c33c3387cb39bffa0&word=" + text,
                success: function (result) {
                    var d2 = document.createElement("div")
                    var close = document.createElement("div")
                    d2.style.border = "1px solid black"
                    d2.style.float = "left"
                    d2.style.margin = "10px"
                    d2.style.padding = "20px"
                    d2.style.position = "relative"
                    close.style.width = "16px"
                    close.style.height = "16px"
                    close.style.border = "1px solid black"
                    close.style.textAlign = "center"
                    close.style.cursor = "pointer"
                    close.style.position = "absolute"
                    close.style.right = "2px"
                    close.style.top = "2px"
                    close.innerHTML = "X"
                    close.onclick = function () {
                        this.parentNode.parentNode.removeChild(this.parentNode)
                    }
                    d2.appendChild(close)
                    poem = result.newslist[0].list
                    poem = poem.split(/[，。]/)
                    for (i = 0; i < poem.length - 1; i++) {
                        var p = document.createElement("p")
                        if (i % 2 == 0) {
                            p.innerHTML = poem[i] + "，"
                        }
                        else {
                            p.innerHTML = poem[i] + "。"
                        }
                        d2.appendChild(p)
                    }
                    document.body.appendChild(d2)
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            })
        })
    </script>
</body>

</html>